const {MonthPicker, WeekPicker, RangePicker} = DatePicker;


const dateFormat = 'YYYY-MM-DD';
const monthFormat = 'YYYY-MM';
const weekFormat = 'YYYY-wo';

class Page extends React.Component {
    state = Object.assign(mountData, {
        picState: {
            fileList: [],
        },
        fileState: {
            fileList: [],
        },

        placeValue: '',//千位符
        urlValue: '',//url

        tabValue: '1',//tab切换

        cycle: '1',
        dataVal: moment(),
        dateStart: moment().format('YYYY-MM-DD'),//日期开始
        dateEnd: moment().format('YYYY-MM-DD'),//日期结束
    });

    componentDidMount() {
        // this.serverRequest = $.get(this.props.source, function (result) {
        //     var lastGist = result[0];
        //     this.setState({
        //         username: lastGist.owner.login,
        //         lastGistUrl: lastGist.html_url
        //     });
        // }.bind(this));
        // this.serverRequest = $.get('./data.json', function (result) {
        //     debugger;
        //     var lastGist = result[0];
        //     this.setState({
        //         username: lastGist.owner.login,
        //         lastGistUrl: lastGist.html_url
        //     });
        // }.bind(this));
    }

    click = () => {
        const _this = this;
        debugger
        fetch(`/sale/project/discount/getDicByScopeGUIDList`, {
            method: 'POST',
        }).then(response => response.json())
            .then(responseJson => {
                console.log(responseJson);
                this.setState({
                    data: responseJson
                });
                console.log(this.state.data)
            }).catch(function (e) {
            console.log("Oops, error");
        });
        return;
        vui.Catch.clear();
    };
    CheckChange = (ev) => {
        vui.Catch.checkChange(ev.target.checked);
    };
    placeChange = (ev) => {//千位符
        const value = ev.target.value;
        this.setState({
            placeValue: vui.Format.setPlaceNum(value),
        });
    };
    urlChange = (ev) => {//url
        const value = ev.target.value;
        this.setState({
            urlValue: vui.Url.get(value),
        });
    };

    showChange = (expanded, record) => {//折叠 table
        if (expanded == true) {
            if (record.children.length == 0 && record.haschildren != '') {
                // vui.Catch.getTableData(record)
            }
        }
    };
    tabClick = (a, b, c) => {
        console.log('tabClick', a, b, c);
    };
    tabChange = (value) => {
        this.setState({
            tabValue: value,
        });

    };


    CycleChange = (value) => {//日期插件
        this.setState({
            cycle: value,
            dateStart: '',//日期开始
            dateEnd: '',//日期结束
            dataVal: '',
        })
    }
    handleDate = (date, dateString) => {//日期插件
        const {cycle} = this.state;

        console.log(date);
        if (cycle == "1") {
            this.setState({
                dateStart: dateString,//日期开始
                dateEnd: dateString,//日期结束
            })
        } else if (cycle == "2") {
            var day = date._d.getDay();//偏差值
            if (day == 0) day = 7;
            var weekStart = moment(date).subtract(day - 1, 'd').format('YYYY-MM-DD');
            var weekEnd = moment(date).add(7 - day, 'd').format('YYYY-MM-DD');
            this.setState({
                dateStart: weekStart,//日期开始
                dateEnd: weekEnd,//日期结束
            })
        } else if (cycle == "3") {
            var year = date._d.getFullYear();
            var month = date._d.getMonth() + 1;
            var days = date.daysInMonth();
            this.setState({
                dateStart: `${year}-${month}-01`,//日期开始
                dateEnd: `${year}-${month}-${days}`,//日期结束
            })
        } else {
            this.setState({
                dateStart: dateString[0],//日期开始
                dateEnd: dateString[1],//日期结束
            })
        }
    };

    render() {
        const _this = this;
        const {columns, loading, dataSource, title} = this.state.table1;
        const {
            placeValue,
            urlValue,
            cycle,//周期类型
            dataVal,//日期数组
            tabValue,//tab切换组
        } = this.state;

        const menu = (
            <Menu>
                <Menu.Item>
                    <a target="_blank" rel="noopener noreferrer" href="#">1st menu menu menu menu</a>
                </Menu.Item>
                <Menu.Item>
                    <a target="_blank" rel="noopener noreferrer" href="#">2nd menu menu menu menu</a>
                </Menu.Item>
                <Menu.Item>
                    <a target="_blank" rel="noopener noreferrer" href="#">3rd menu menu menu menu</a>
                </Menu.Item>
            </Menu>
        );
        return (
            <div>
                <HeaderBox project={false}/>
                <div className="content_vl">
                    <div className="project_menu">
                        <div className="project_inner">
                            <LeftMenu/>
                        </div>
                    </div>
                    <LocaleProvider locale={locales.zh_CN}>
                        <div className="" style={{padding: "20px"}}>
                            <div className="content_view">
                                <div className="table_box">

                                    {/*Ajax*/}
                                    <Card
                                        type="inner"
                                        title="Ajax"
                                    >

                                    </Card>
                                    {/*Cookie*/}
                                    <Card
                                        type="inner"
                                        title="Cookie"
                                        style={{marginTop: 20}}
                                    >
                                        {
                                            (function () {
                                                vui.Cookie({name: 'OrgID', value: "00000000000000"});//设置 cookie
                                                // vui.Cookie({ name: 'OrgID', value: "00000000000000", expires: -1 });//删除 cookie
                                                vui.GetCookie('OrgID');//读取 cookie
                                            })()
                                        }
                                    </Card>
                                    {/*Upload*/}
                                    <Card
                                        type="inner"
                                        title="Upload"
                                        style={{marginTop: 20}}
                                        extra={
                                            <Affix offsetTop={100} style={{}}
                                                   onChange={affixed => console.log('affixed', affixed)}>
                                                <Button size={'small'} style={{float: 'right'}}
                                                        onClick={this.click}>渲染</Button>
                                            </Affix>
                                        }
                                    >
                                        <UploadImages
                                            picState={this.state.picState}
                                            title="上传图片"
                                            picNum={2}
                                            minSize={20}
                                        />
                                        <Col style={{margin: "10px 0"}}>
                                            <Input addonBefore="上传图片所返回路径" value={
                                                (function (arr) {
                                                    _this.state.picState.fileList.map(function (tar, n) {
                                                        arr.push(tar ? tar.response.url : '');
                                                    });
                                                    return arr.join(' , ');
                                                })([])
                                            } defaultValue=""/>
                                        </Col>
                                        <UploadFiles
                                            fileState={this.state.fileState}
                                            type={['xlsx', 'xls']}
                                            title="上传文件"
                                            fileNum={3}
                                            minSize={20}/>
                                        <Col style={{margin: "10px 0"}}>
                                            <Input addonBefore="上传文件所返回路径" value={
                                                (function (arr) {
                                                    _this.state.fileState.fileList.map(function (tar, n) {
                                                        arr.push(tar ? tar.response.url : '');
                                                    });
                                                    return arr.join(' , ');
                                                })([])
                                            } defaultValue=""/>
                                        </Col>
                                    </Card>
                                    {/*Url*/}
                                    <Card
                                        type="inner"
                                        title="Url"
                                        style={{marginTop: 20}}
                                    >
                                        <Col span={8}>
                                            <Input addonBefore="key" onChange={this.urlChange}/>
                                        </Col>
                                        <Col span={6}>
                                            <Input value={urlValue} disabled={true}/>
                                        </Col>


                                    </Card>
                                    {/*Format*/}
                                    <Card
                                        type="inner"
                                        title="format"
                                        style={{marginTop: 20}}
                                    >
                                        <Col span={8}>
                                            <Input addonBefore="千位符" onChange={this.placeChange}/>
                                        </Col>
                                        <Col span={6}>
                                            <Input value={placeValue} disabled={true}/>
                                        </Col>


                                    </Card>
                                    {/*Table Pagination*/}
                                    <Card
                                        type="inner"
                                        title={title}
                                        style={{marginTop: "20px"}}
                                        className="table_box thCenter"
                                        extra={
                                            <div style={{
                                                position: 'absolute',
                                                width: "100%",
                                                right: "20px",
                                                top: "11px"
                                            }}>
                                                <Checkbox style={{marginRight: '20px'}} checked={loading}
                                                          onChange={this.CheckChange}>{loading ? 'loading' : ''}</Checkbox>
                                                <Button size="small" onClick={this.Export}>导出</Button>
                                            </div>
                                        }
                                    >
                                        <Table columns={columns} loading={loading} bordered dataSource={dataSource}
                                               pagination={false} onExpand={this.showChange}
                                               scroll={{x: '1300px'}}/>


                                    </Card>
                                    {/*tab标签*/}
                                    <Card
                                        type="inner"
                                        title="tabs"
                                    >
                                        <Tabs onTabClick={this.tabClick} onChange={this.tabChange} activeKey={tabValue}
                                              type="card">
                                            <TabPane tab="Tab 1" key="1">Content of Tab Pane 1</TabPane>
                                            <TabPane tab="Tab 2" key="2">Content of Tab Pane 2</TabPane>
                                            <TabPane tab="Tab 3" key="3">Content of Tab Pane 3</TabPane>
                                        </Tabs>
                                    </Card>
                                    {/*DatePicker*/}
                                    <Card
                                        type="inner"
                                        title="Date"
                                        style={{marginTop: 20}}
                                    >
                                        <Row>

                                            <Col span={8} style={{paddingRight: "10px"}}>
                                                <InputGroup compact>
                                                    <Input addonBefore="统计周期" tabindex={-1} style={{width: '80px'}}/>
                                                    <Select
                                                        style={{width: 'calc(100% - 80px)', marginLeft: '-1px'}}
                                                        optionFilterProp="children"
                                                        value={cycle}
                                                        onChange={this.CycleChange}
                                                    >
                                                        <Option value="1">日</Option>
                                                        <Option value="2">周</Option>
                                                        <Option value="3">月</Option>
                                                        <Option value="">自定义</Option>
                                                    </Select>
                                                </InputGroup>
                                            </Col>

                                            <Col span={8}>
                                                {
                                                    (function () {
                                                        if (cycle == '1') {
                                                            return <div>
                                                                <InputGroup compact>
                                                                    <Input addonBefore="日期" tabindex={-1}
                                                                           style={{width: '70px'}}/>
                                                                    <DatePicker onChange={_this.handleDate}
                                                                                format={dateFormat}
                                                                                defaultValue={dataVal} style={{
                                                                        width: "calc(100% - 70px)",
                                                                        marginLeft: "-1px"
                                                                    }}/>
                                                                </InputGroup>

                                                            </div>
                                                        } else if (cycle == '2') {
                                                            return <div>
                                                                <InputGroup compact>
                                                                    <Input addonBefore="日期" tabindex={-1}
                                                                           style={{width: '70px'}}/>
                                                                    <WeekPicker onChange={_this.handleDate}
                                                                                format={weekFormat} style={{
                                                                        width: "calc(100% - 70px)",
                                                                        marginLeft: "-1px"
                                                                    }}/>
                                                                </InputGroup>

                                                            </div>
                                                        } else if (cycle == '3') {
                                                            return <div>
                                                                <InputGroup compact>
                                                                    <Input addonBefore="日期" tabindex={-1}
                                                                           style={{width: '70px'}}/>
                                                                    <MonthPicker onChange={_this.handleDate}
                                                                                 format={monthFormat} style={{
                                                                        width: "calc(100% - 70px)",
                                                                        marginLeft: "-1px"
                                                                    }}/>
                                                                </InputGroup>

                                                            </div>
                                                        } else {
                                                            return <div>
                                                                <InputGroup compact>
                                                                    <Input addonBefore="日期" tabindex={-1}
                                                                           style={{width: '70px'}}/>
                                                                    <RangePicker onChange={_this.handleDate}
                                                                                 style={{
                                                                                     width: "calc(100% - 70px)",
                                                                                     marginLeft: "-1px"
                                                                                 }}/>
                                                                </InputGroup>

                                                            </div>
                                                        }
                                                    })()
                                                }
                                            </Col>
                                        </Row>


                                    </Card>
                                    {/*message Alert modal*/}
                                    <Card
                                        type="inner"
                                        title="message"
                                        style={{marginTop: 20}}
                                    >
                                        <div>
                                            <Button onClick={() => message.success('成功！')}
                                                    style={{marginRight: 10}}>Success</Button>
                                            <Button onClick={() => message.error('错误！')}
                                                    style={{marginRight: 10}}>Error</Button>
                                            <Button onClick={() => message.warning('警告！')}
                                                    style={{marginRight: 10}}>Warning</Button>
                                            <Button onClick={
                                                () => {
                                                    confirm({
                                                        title: 'Are you sure delete this task?',
                                                        content: 'Some descriptions',
                                                        okText: '确定',
                                                        okType: 'danger',
                                                        cancelText: '取消',
                                                        onOk() {
                                                            console.log('OK');
                                                        },
                                                        onCancel() {
                                                            console.log('Cancel');
                                                        },
                                                    });
                                                }
                                            }>删除时提示</Button>
                                            <Row>
                                                <Col span={6} style={{margin: 10}}>
                                                    <Alert
                                                        message="Informational Notes"
                                                        description="Additional description and informations about copywriting."
                                                        type="info"
                                                        showIcon
                                                    />
                                                </Col>
                                                <Col span={6} style={{margin: 10}}>
                                                    <Alert
                                                        message="Warning"
                                                        description="This is a warning notice about copywriting."
                                                        type="warning"
                                                        showIcon
                                                    />
                                                </Col>
                                                <Col span={6} style={{margin: 10}}>
                                                    <Alert
                                                        message="Error"
                                                        description="This is an error message about copywriting."
                                                        type="error"
                                                        showIcon
                                                    />
                                                </Col>
                                            </Row>
                                        </div>
                                    </Card>
                                    {/*Dropdown*/}
                                    <Card
                                        type="inner"
                                        title="Dropdown"
                                        style={{marginTop: 20}}
                                    >
                                        <div>
                                            <Dropdown overlay={menu} placement="bottomLeft">
                                                <Button>bottomLeft</Button>
                                            </Dropdown>
                                            <Dropdown overlay={menu} placement="bottomCenter">
                                                <Button>bottomCenter</Button>
                                            </Dropdown>
                                            <Dropdown overlay={menu} placement="bottomRight">
                                                <Button>bottomRight</Button>
                                            </Dropdown>
                                            <br/>
                                            <Dropdown overlay={menu} placement="topLeft">
                                                <Button>topLeft</Button>
                                            </Dropdown>
                                            <Dropdown overlay={menu} placement="topCenter">
                                                <Button>topCenter</Button>
                                            </Dropdown>
                                            <Dropdown overlay={menu} placement="topRight">
                                                <Button>topRight</Button>
                                            </Dropdown>
                                        </div>
                                    </Card>
                                </div>
                            </div>
                        </div>
                    </LocaleProvider>
                </div>
            </div>
        );
    }
}